<template>
	<view>
		<uni-nav-bar @clickLeft="goback" left-icon="back" title="支付结果" fixed :border="false"></uni-nav-bar>
		<view class="pay_top">
			<image src="../static/orderi1.png" mode=""></image>
			<view class="t1">
				支付成功
			</view>
			<view class="price">
				<span>￥</span>{{obj.payAmount}}
			</view>
		</view>
		<view class="imgpre">
			<image src="/static/icon/ju.png" mode=""></image>
			<view class="textpoa">
				<view class="t1">
					取餐码
				</view>
				<view class="t2">
					{{obj.takeCode}}
				</view>
				<view class="t3">
					请到店使用取餐码取餐
				</view>
			</view>
		</view>
		<countdown v-if="obj.takeTimeBegin" @opents='opents'
		:timeBegin='obj.takeTimeBegin' :timeEnd="obj.takeTimeEnd"></countdown>
		<view class="tsimg">
			<image src="/static/js.png" mode=""></image>
			<view class="test">
				累计为地球减少 <span>{{obj.c|smartWeight}}</span> 碳排放
			</view>
		</view>
		<view class="footerbtn">
			<view class="cont">
				<view class="btn b1" @click="godetails">
					查看详情
				</view>
				<view class="btn b2" style="margin-right: 20rpx;" @click="goindex">
					返回首页
				</view>
			</view>
		</view>
		<clearts ref="popupts"></clearts>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj:{}
			};
		},
		onLoad(option) {
			this.obj = JSON.parse(decodeURIComponent(option.obj))
			// this.obj = uni.getStorageSync('obj')
		},
		methods:{
			opents() {
				this.$refs.popupts.open()
			},
			goback(){
				uni.navigateBack()
			},
			godetails(){
				uni.redirectTo({
					url:`/mainpage/orderdetail?id=${this.obj.id}`
				})
			},
			goindex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.pay_top {
		text-align: center;
		margin-top: 38rpx;

		image {
			width: 142rpx;
			height: 97rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 40rpx;
		}

		.price {
			font-family: 'DINB';
			font-size: 72rpx;
			color: #000000;
			margin-top: 14rpx;

			span {
				font-size: 40rpx;
				font-weight: 400;
			}
		}
	}

	.imgpre {
		position: relative;
		margin: 40rpx auto;
		width: 416rpx;
		height: 251rpx;

		image {
			width: 416rpx;
			height: 251rpx;
		}

		.textpoa {
			text-align: center;
			position: absolute;
			width: 416rpx;
			height: 251rpx;
			padding: 24rpx;
			box-sizing: border-box;
			top: 0%;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.t2 {
				font-family: 'DINB';
				font-size: 80rpx;
				color: #000000;
			}

			.t3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #23633D;
				line-height: 33rpx;
				margin-top: 40rpx;
			}
		}
	}


	.tsimg {
		width: 710rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx auto;

		image {
			width: 710rpx;
			height: 120rpx;
		}

		.test {
			position: absolute;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 20rpx;

			span {
				font-family: 'DINB';
				font-size: 40rpx;
			}
		}
	}
	
	
	
	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.cont{
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			flex-direction: row-reverse;
			.btn{
				width: 240rpx;
				height: 92rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 92rpx;
				text-align: center;
			}
			.b1{
				border: 2rpx solid #000000;
				color: #000;
			}
			.b2{
				color: #D9D9D9;
				border: 2rpx solid #D9D9D9;
			}
		}
	}
</style>